<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tab1,#tab2,#tab3{
            background-image: url("./image/未标题-1.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #tab1{
            border-collapse: collapse;
        }
        #tab1 td{
            padding: 16px;
            border: 1px black solid;
        }
        #tab2{
            border-collapse: collapse;
        }
        #tab2 td{
            padding: 16px;
            border: 1px black solid;
        }
        #tab3{
            border-collapse: collapse;
        }
        #tab3 td{
            padding: 16px;
            border: 1px solid black;
        }
        #d3,#d1,#d2{
            
            margin-top: 20px;
        }
        #d3 caption,#d1 caption{
            font-size: 40px;
            
        } 
    </style>
</head>
<body>
    <div id="d1">
        <table id="tab1">
            <caption>成绩表</caption>
            <tr>
                <td>姓名</td>
                <td>语文</td>
                <td>数学</td>
                <td>总分</td>
            </tr>
            <tr>
                <td>李小路</td>
                <td>99</td>
                <td>99</td>
                <td>198</td>
            </tr>
            <tr>
                <td>安可可</td>
                <td>100</td>
                <td>100</td>
                <td>200</td>
            </tr>
        </table>
    </div>
    <div id="d2">
        <table id="tab2">
            <tr>
                <td colspan="2" rowspan="2">单元格1</td>
               
                <td colspan="2">单元格3</td>
                
                
                <td colspan="4" rowspan="3">单元格6</td>
                
            </tr>
            <tr>
                
                <td>单元格2</td>
                
                <td>单元格4</td>
                
            </tr>
            <tr>
                <td colspan="2" rowspan="2">单元格1</td>
              
                <td>单元格3</td>
                <td>单元格4</td>
                
            </tr>
            <tr>
               
                <td>单元格2</td>
                <td>单元格3</td>
                <td colspan="2">单元格4</td>
                <td colspan="2">单元格5</td>
             
                
            </tr>
            <tr>
                <td colspan="2">单元格1</td>
               
                <td>单元格3</td>
                <td>单元格4</td>
                <td colspan="2">单元格4</td>
                <td colspan="2">单元格4</td>
                
            </tr>
            <tr>
                <td colspan="2">单元格1</td>
            
                <td>单元格3</td>
                <td>单元格4</td>
                <td colspan="2">单元格5</td>
               
                <td colspan="2">单元格6</td>
            </tr>
            <tr>
                <td colspan="4">单元格1</td>
             
                <td colspan="2">单元格5</td>
                
                <td colspan="2">单元格6</td>
                
            </tr>
            <tr>
                <td colspan="8">单元格1</td>
                
            </tr>
        </table>
    </div>
    <div id="d3">
        <table id="tab3">
            <caption>复杂的成绩表</caption>
            <tr>
                <td rowspan="2">姓名</td>
                
                <td colspan="2">通识课</td>
               
               
                <td colspan="6">专业课</td>
                <td rowspan="2">总分</td>
            </tr>
            <tr>
                
                <td>英语</td>
                <td>高数</td>
                
                <td colspan="2">UI设计</td>
                <td colspan="2">网页设计</td>
                <td colspan="2">程序设计</td>
                
                
            </tr>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
                <td colspan="2">80</td>
                <td colspan="2">90</td>
                <td colspan="2">80</td>
                <td>380</td>
               
            </tr>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
                <td colspan="2">80</td>
                <td colspan="2">90</td>
                <td colspan="2">80</td>
                <td>380</td>
               
            </tr>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
                <td colspan="2">80</td>
                <td colspan="2">90</td>
                <td colspan="2">80</td>
                <td>380</td>
               
            </tr>
            <tr>
                <td>张三</td>
                <td>60</td>
                <td>70</td>
                <td colspan="2">80</td>
                <td colspan="2">90</td>
                <td colspan="2">80</td>
                <td>380</td>
               
            </tr>
            <tr>
                <td>平均分</td>
                <td>70</td>
                <td>80</td>
                <td colspan="2">90</td>
                <td colspan="2">90</td>
                <td colspan="2">80</td>
                <td>380</td>
               
            </tr>
        </table>
    </div>
</body>
</html>